<script setup>
import { ref } from 'vue'

const btnRef = ref(null)
const handleClick = () => {
  console.log(btnRef.value.ref)

  window.alert('点击了')
}
</script>

<template>
  <div>
    <h1 class="row-title">普通引入</h1>
    <div class="row">
      <lee-button>默认按钮</lee-button>
      <lee-button type="primary">主要按钮</lee-button>
      <lee-button type="success">成功按钮</lee-button>
      <lee-button type="warning">警告按钮</lee-button>
      <lee-button type="danger">危险按钮</lee-button>
    </div>
    <h1 class="row-title">朴素按钮</h1>
    <div class="row">
      <lee-button plain>默认按钮</lee-button>
      <lee-button type="primary" plain>主要按钮</lee-button>
      <lee-button type="success" plain>成功按钮</lee-button>
      <lee-button type="warning" plain>警告按钮</lee-button>
      <lee-button type="danger" plain>危险按钮</lee-button>
    </div>
    <h1 class="row-title">圆角按钮</h1>
    <div class="row">
      <lee-button round>默认按钮</lee-button>
      <lee-button type="primary" round>主要按钮</lee-button>
      <lee-button type="success" round>成功按钮</lee-button>
      <lee-button type="warning" round>警告按钮</lee-button>
      <lee-button type="danger" round>危险按钮</lee-button>
    </div>
    <h1 class="row-title">禁用按钮</h1>
    <div class="row">
      <lee-button disabled>默认按钮</lee-button>
      <lee-button type="primary" disabled>主要按钮</lee-button>
      <lee-button type="success" disabled>成功按钮</lee-button>
      <lee-button type="warning" disabled>警告按钮</lee-button>
      <lee-button type="danger" disabled>危险按钮</lee-button>
    </div>
    <h1 class="row-title">加载中按钮</h1>
    <div class="row">
      <lee-button loading>默认按钮</lee-button>
      <lee-button type="primary" loading>主要按钮</lee-button>
      <lee-button type="success" loading>成功按钮</lee-button>
      <lee-button type="warning" loading>警告按钮</lee-button>
      <lee-button type="danger" loading>危险按钮</lee-button>
    </div>
    <h1 class="row-title">带有图标的按钮</h1>
    <div class="row">
      <lee-button icon="user">默认按钮</lee-button>
      <lee-button type="primary" icon="user">主要按钮</lee-button>
      <lee-button type="success" icon="user">成功按钮</lee-button>
      <lee-button type="warning" icon="user">警告按钮</lee-button>
      <lee-button type="danger" icon="user">危险按钮</lee-button>
    </div>
    <h1 class="row-title">带有尺寸的按钮</h1>
    <div class="row">
      <lee-button size="mini">默认按钮</lee-button>
      <lee-button type="primary" size="small">主要按钮</lee-button>
      <lee-button type="success">成功按钮</lee-button>
      <lee-button type="warning" size="large">警告按钮</lee-button>
      <lee-button type="danger" size="large">危险按钮</lee-button>
    </div>
    <h1 class="row-title">带有圆形的按钮</h1>
    <div class="row">
      <lee-button size="mini" circle icon="user"></lee-button>
      <lee-button type="primary" circle icon="user"></lee-button>
      <lee-button type="success" circle icon="user"></lee-button>
      <lee-button type="warning" circle icon="user"></lee-button>
      <lee-button type="danger" circle icon="user"></lee-button>
    </div>
    <h1 class="row-title">点击事件</h1>
    <div class="row">
      <lee-button plain @click="handleClick" ref="btnRef">点击</lee-button>
    </div>
  </div>
</template>
